@import '../../containers/Application/colors.scss';

$length: 16px;
$primaryColor: $blueZodiac;
$secondaryColor: $white;
$disabledColor: $silver;

.checkbox.dark {
    input + span {
        border-color: currentColor;
        color: currentColor;
    }

    input:checked + span {
        background: $primaryColor;
        border-color: $primaryColor;
        color: $white;
    }
}

.checkbox.light {
    input + span {
        border-color: $secondaryColor;
        color: $primaryColor;
    }

    input:checked + span {
        background: $secondaryColor;
    }
}

.checkbox.small {
    font-size: 12px;
}

.checkbox {
    width: $length;
    height: $length;

    input + span {
        display: block;
        width: 100%;
        height: 100%;
        background: transparent;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 2px;
        border-width: 1px;
        border-style: solid;
        text-align: center;
        line-height: $length;

        & > * {
            position: relative;
            top: -1px;
            left: -1px;
            font-size: $length;
        }
    }

    input:disabled + span {
        border-color: $disabledColor;
        color: $disabledColor;
    }

    input:disabled:checked + span {
        background: $disabledColor;
        color: $white;
    }
}
